﻿@model XHouse.Model.Ambiente

@{
    ViewBag.Title = "Configurar Ambiente";
}

<style>
    .draggable { width: 30px; z-index: 1}

    #droppable { padding: 0.5em; }

    .seleccionado {
        border: solid 2px red;
    }
    
    .posicionado {
    }
</style>

<div class="row">
  <div class="col-xs-12 col-md-10 col-md-offset-1">
    <div class="page-header">
      <h3>Configurar Ambiente</h3>
    </div>
    
    <!-- Columna izquierda -->
    <div class="col-lg-2">
      <h4 class="mb20">Aparatos</h4>
      
      <div id="lista-aparatos">
      @* Agrego a la lista de aparatos los aparatos no posicionados. *@
      @foreach (var a in Model.Aparatos.Where(a => !a.Posicionado))
      {
        <div style="margin-bottom: 5px;" class="ui-widget-content">
          <img id="aparato-@a.Id" src="@ViewBag.PathImgTipoAparatos[a.TipoAparatoId]" alt="A" class="draggable"/>
          <span>@a.Nombre</span>
        </div>
      }
            
      @* Agrego a la lista de aparatos los aparatos posicionados dentro de la imagen de la zona. *@
      @foreach (var a in Model.Aparatos.Where(a => a.Posicionado))
      {
        <div style="margin-bottom: 5px;" class="ui-widget-content">
          <img id="aparato-@a.Id" src="@ViewBag.PathImgTipoAparatos[a.TipoAparatoId]" alt="A" class="draggable posicionado" style="position: relative; left: @(a.PosicionX)px; top: @(a.PosicionY)px;"/>
          <span>@a.Nombre</span>
        </div>
      }
    </div>

    </div>
    
    <!-- Columna central (imagen) -->
    <div class="col-lg-8">
      <h4 class="mb10">Ambiente</h4>
      <div id="droppable">
        <img src="@ViewBag.PathImagen" alt="Ambiente" style="width: 100%;"/>
      </div>
    </div>
    
    <!-- Columna derecha (configuración) -->
    <div class="col-lg-2">
      <h4 class="mb20">Información</h4>

      <label id="aparato-nombre" style="font-weight: bold">Nombre del aparatos (1234)</label>
      <span id="aparato-tipo" class="help-block">(Tipo de Aparato)</span>
    </div>
    
  </div>
</div>

@section Scripts
{
  <script src="~/Scripts/jquery-ui-1.10.3.min.js"></script>
  <script type="text/javascript">
    $(function() {

      $('.draggable').click(function() {
        actualizarSeleccion(this);

        var idAparato = $(this)[0].id.replace('aparato-', '');
        mostrarConfigAparato(idAparato);
      });

      // Hago que las imágenes de los artefactos sean draggables
      $(".draggable").draggable({
        revert: "invalid",
        stop: function() {
          // Evento que surge cuando se para de arrastrar, siempre
        }
      });

      // Inicialización del objecto droppable (la imagen de la zona)
      $("#droppable").droppable({
        drop: function(event, ui) {
          $(this).addClass("posicionado");

          var apar = { "Id": getAparatoId(ui.draggable[0].id), "PosicionX": ui.position.left, "PosicionY": ui.position.top };
          
          $.ajax({
            type: "POST",
            url: "@Url.Action("Posicionar", "Aparatos")",
            data: apar,
            accept: 'application/json'
          });
        }
      });
    });

    function actualizarSeleccion(apar) {
      $('.posicionado').removeClass("seleccionado");
      $(apar).addClass('seleccionado');
    }

    function mostrarConfigAparato(id) {
      // Obtengo la lista de Tipos de Aparatos disponibles
      $.getJSON('/Aparatos/Get/' + id, function(a) {

        $.getJSON('/TipoAparatos/Get/' + a.tipoId, function(ta) {
          $('#aparato-nombre').html(a.nombre + ' (' + a.numero + ')');
          $('#aparato-tipo').html(ta.nombre);
        });
      });
    }
    
    function getAparatoId(idElemento) {
      return parseInt(idElemento.split('-')[1]);
    }
  </script>
}
